<template>
  <div class='container' >
    <el-dialog
    :title="data.id?'编辑目录':'新增目录'"
    :visible.sync="showWindow"
    width="20%"
    :before-close="close"
    @open='echo()'>
        <el-form label-width="80px" ref="form" :model="form" :rules="rules">
            <el-form-item  label="所属学科" prop="subjectID">
                    <el-select v-model="form.subjectID" style="width:100%">
                        <el-option
                         :value="item.value"
                         :label="item.label"
                         v-for="item in options"
                         :key="item.value">
                         </el-option>
                    </el-select>
            </el-form-item>
            <el-form-item label="目录名称" prop="tagName">
                <el-input v-model="form.tagName"></el-input>
            </el-form-item>
        </el-form>
            <div slot="footer">
              <el-button @click="close()">取消</el-button>
              <el-button type="primary" @click="choseAddOr()">确认</el-button>
            </div>
    </el-dialog>
  </div>
</template>

<script>

import { update, add } from '../../api/hmmm/tags'
import { simple } from '../../api/hmmm/subjects'
export default {
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      showWindow: false,
      form: {
        id: null,
        subjectID: null,
        tagName: null
      },
      options: [],
      rules: {
        subjectID: [
          { type: 'number', message: '请选择所属学科', tirgger: 'blur' }
        ],
        tagName: [
          { required: true, message: '请输入标签名称', tirgger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 回显
    echo () {
      if (this.data.id) {
        this.form.id = this.data.id
        this.form.subjectID = this.data.subjectName
        this.form.tagName = this.data.tagName
      }
    },
    choseAddOr () {
      this.$refs.form.validate(async (val) => {
        if (val) {
          if (this.form.id) {
            this.form.id = this.data.id
            const res = await update(this.form)
            // console.log('编辑')
            console.log(this.form)
            console.log(res)
            this.$message.success('编辑成功')
          } else {
            const res = await add(this.form)
            console.log(res)
            // console.log('添加')
            console.log(this.form)
            this.$message.success('添加成功')
          }
          this.close()
        }
      })
    },
    close () {
      this.form = {
        id: null,
        subjectID: null,
        tagName: null
      }
      this.showWindow = false
      this.$parent.getList()
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },

    openWindow () {
      this.showWindow = true
      this.getList()
    },
    async getList () {
      const { data } = await simple()
      this.options = data
    }
  }
}
</script>

<style scoped lang='scss'></style>
